<template>
	<view v-if="title === '修改密码'" class="modify-password">
		<view class="modify-password__input-box flex">
			<image class="modify-password__input-icon" src="/static/images/login/password.png" mode="aspectFill"></image>
			<input 
				type="safe-password" 
				:password="isOldPasswordVisible" 
				class="modify-password__input" 
				v-model="oldPassword"
				placeholder="请输入原始密码"
			/>
			<image 
				class="modify-password__input-icon" 
				:src="isOldPasswordVisible ? '/static/images/login/hidePassword.png' : '/static/images/login/lookPassword.png'" 
				mode="aspectFill" 
				@click="toggleOldPasswordVisibility"
			></image>
		</view>
		
		<view class="modify-password__input-box flex">
			<image class="modify-password__input-icon" src="/static/images/login/password.png" mode="aspectFill"></image>
			<input 
				type="safe-password" 
				:password="isNewPasswordVisible" 
				class="modify-password__input" 
				v-model="newPassword"
				placeholder="请输入新密码"
			/>
			<image 
				class="modify-password__input-icon" 
				:src="isNewPasswordVisible ? '/static/images/login/hidePassword.png' : '/static/images/login/lookPassword.png'" 
				mode="aspectFill" 
				@click="toggleNewPasswordVisibility"
			></image>
		</view>
		
		<view class="modify-password__input-box flex">
			<image class="modify-password__input-icon" src="/static/images/login/password.png" mode="aspectFill"></image>
			<input 
				type="safe-password" 
				:password="isConfirmPasswordVisible" 
				class="modify-password__input" 
				v-model="confirmPassword"
				placeholder="请确认新密码"
			/>
			<image 
				class="modify-password__input-icon" 
				:src="isConfirmPasswordVisible ? '/static/images/login/hidePassword.png' : '/static/images/login/lookPassword.png'" 
				mode="aspectFill" 
				@click="toggleConfirmPasswordVisibility"
			></image>
		</view>
		
		<view class="modify-password__rules">
			<view class="modify-password__rules-item">
				<image 
					class="modify-password__rules-icon" 
					:src="passwordRules.lengthValid ? '/static/images/login/checked.png' : '/static/images/login/unchecked.png'" 
					mode="aspectFill"
				></image>
				<text :class="{ 'text-success': passwordRules.lengthValid }">密码由8-16位数字、字母或符号组成</text>
			</view>
			<view class="modify-password__rules-item">
				<image 
					class="modify-password__rules-icon" 
					:src="passwordRules.complexityValid ? '/static/images/login/checked.png' : '/static/images/login/unchecked.png'" 
					mode="aspectFill"
				></image>
				<text :class="{ 'text-success': passwordRules.complexityValid }">至少含2种以上字符</text>
			</view>
		</view>
		
		<view class="modify-password__btn" @click="handleModifyPassword">
			完成
		</view>
	</view>

	<view class="user-modify" v-else>
		<view class="user-modify__input-box flex">
			<input type="text" class="user-modify__input" v-model="userInfo"/>
			<image src="/static/images/cancel.png" mode="aspectFill" class="user-modify__input-icon" @click="onClickClear"></image>
		</view>
		
		<view class="user-modify__btn" @click="onClickSubmit">
			完成
		</view>
	</view>
</template>

<script setup>
// import { onMounted } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { ref, computed } from 'vue';
	import { userStore } from '@/store/userStore.js';
	
	const userInfo = ref('')
	const title = ref('')
	
	// 密码相关的响应式变量
	const oldPassword = ref('');
	const newPassword = ref('');
	const confirmPassword = ref('');
	const isOldPasswordVisible = ref(true);
	const isNewPasswordVisible = ref(true);
	const isConfirmPasswordVisible = ref(true);
	
	// 密码规则验证计算属性
	const passwordRules = computed(() => {
		const lengthRule = /^.{8,16}$/;
		const complexityRule = /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d!@#$%^&*()_+]/;
		
		return {
			lengthValid: lengthRule.test(newPassword.value),
			complexityValid: complexityRule.test(newPassword.value)
		};
	});
	
	function onClickClear(){
		userInfo.value = '';
	}
	
	function onClickSubmit(){
		if (!userInfo.value.trim()) {
			uni.showToast({
				title: '内容不能为空',
				icon: 'none'
			});
			return;
		}
		
		// 根据标题确定要修改的字段
		let field = '';
		switch(title.value) {
			case '修改用户名':
				field = 'username';
				break;
			case '修改性别':
				field = 'gender';
				break;
			case '修改简介':
				field = 'intro';
				break;
			case '修改手机号':
				field = 'phone';
				break;
			case '修改学校':
				field = 'school';
				break;
			case '修改密码':
				field = 'password';
				break;
			default:
				field = '';
		}
		
		if (field) {
			// 更新全局用户信息
			userStore.updateUserInfo(field, userInfo.value);
			
			// 显示成功提示
			uni.showToast({
				title: '修改成功',
				icon: 'success'
			});
			
			// 返回上一页
			setTimeout(() => {
				uni.navigateBack();
			}, 1500);
		} else {
			uni.showToast({
				title: '修改失败',
				icon: 'none'
			});
		}
	}
	
	// 切换密码可见性的方法
	function toggleOldPasswordVisibility() {
		isOldPasswordVisible.value = !isOldPasswordVisible.value;
	}

	function toggleNewPasswordVisibility() {
		isNewPasswordVisible.value = !isNewPasswordVisible.value;
	}

	function toggleConfirmPasswordVisibility() {
		isConfirmPasswordVisible.value = !isConfirmPasswordVisible.value;
	}

	// 修改密码的方法
	function handleModifyPassword() {
		if (!oldPassword.value || !newPassword.value || !confirmPassword.value) {
			uni.showToast({
				title: '请填写完整密码信息',
				icon: 'none'
			});
			return;
		}
		
		if (newPassword.value !== confirmPassword.value) {
			uni.showToast({
				title: '两次输入的新密码不一致',
				icon: 'none'
			});
			return;
		}
		
		// 验证密码规则
		const passwordRegex = /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d!@#$%^&*()_+]{8,16}$/;
		if (!passwordRegex.test(newPassword.value)) {
			uni.showToast({
				title: '密码不符合规则要求',
				icon: 'none'
			});
			return;
		}

		userStore.updateUserInfo('password', newPassword.value);
		
		// TODO: 调用修改密码的API
		uni.showToast({
			title: '密码修改成功',
			icon: 'success'
		});
		
		// 返回上一页
		setTimeout(() => {
			uni.navigateBack();
		}, 1500);
	}
	
	onLoad((query)=>{
		// console.log(query);
		if(!query) console.log('没获取到参数');
		let {info,title: titleText} = query;
		title.value = titleText;
		uni.setNavigationBarTitle({
			title: titleText
		})
		userInfo.value = info
	})

	
</script>

<style lang="scss" scoped>
.user-modify{
	width: 100%;
	height: 100%;
	background-color: #f2f2f2;
	box-sizing: border-box;
	padding-top: 30rpx;
	&__input-box{
		width: 100%;
		height: 76rpx;
		background-color: #fff;
		box-sizing: border-box;
		padding: 0 30rpx;
		// margin-top: 30rpx;
	}
	
	&__input{
		flex: 1;
		height: 100%;
		&-icon{
			width: 28rpx;
			height: 28rpx;
		}
	}
	
	&__btn{
		width: 190rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		background-color: #81d3f8;
		border-radius: 20rpx;
		margin: 0 auto;
		margin-top: 94rpx;
	}
}

.modify-password {
	padding: 30rpx;
	
	&__input-box {
		width: 100%;
		height: 90rpx;
		background-color: #fff;
		border-radius: 45rpx;
		margin-bottom: 30rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}
	
	&__input {
		flex: 1;
		height: 90rpx;
		font-size: 28rpx;
		margin: 0 20rpx;
	}
	
	&__input-icon {
		width: 40rpx;
		height: 40rpx;
	}
	
	&__rules {
		margin-top: 40rpx;
		padding: 0 20rpx;
		
		&-item {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			font-size: 24rpx;
			color: #666;
			
			.text-success {
				color: #81d3f8;
			}
		}
		
		&-icon {
			width: 32rpx;
			height: 32rpx;
			margin-right: 10rpx;
		}
	}
	
	&__btn {
		width: 90%;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		background-color: #81d3f8;
		color: #fff;
		font-size: 32rpx;
		border-radius: 45rpx;
		margin: 60rpx auto 0;
		box-shadow: 0 4rpx 16rpx rgba(129, 211, 248, 0.4);
	}
}
</style>
